<template>
    <div>
        
        项目名称: <input type="text" placeholder="请输入项目名称" v-model="Whereinfo.Iname">
        项目总金额： <input type="text" placeholder="请输入最小投资金额" v-model="Whereinfo.MinIbudget">-<input type="text" placeholder="请输入最大投资金额" v-model="Whereinfo.MaxIbudget">
        <input type="button" value="查询" class="btn btn-success"  @click="loadShow">
        <table class="table table-bordered">
            <thead>
                <tr style="background-color: aqua;">
                    <td>投资项目编号</td>
                    <td>投资项目名称</td>
                    <td>投资项目总金额</td>
                    <td>已投资金额</td>
                    <td>剩余投资金额</td>
                    <td>投资次数</td>
                    <td>操作</td>
                </tr>
            </thead>
    
            <tbody>
                <tr v-for="item in info">
                    <td>{{ item.I_Id }}</td>
                    <td>{{ item.I_Name }}</td>
                    <td>{{ item.I_Budget }}</td>
                    <td>{{ item.I_Receive }}</td>
                    <td>{{ item.I_Residue }}</td>
                    <td>{{ item.I_Number }}</td>
                    <td>
                        <slot :id="item.I_Id"></slot>
                    </td>
                </tr>
            </tbody>
        </table>
    
        <span>
            当前共{{ PageInfo.totalCount }}条,每页显示{{ PageInfo.Psize }}条,当前第{{ PageInfo.Pindex }}/{{ PageInfo.pageCount }}页
            <a href="#" @click="PageLoadInfo('F')">首页</a>&nbsp;
            <a href="#" @click="PageLoadInfo('U')">上一页</a>&nbsp;
            <a href="#" @click="PageLoadInfo('N')">下一页</a>&nbsp;
            <a href="#" @click="PageLoadInfo('E')">尾页</a>&nbsp;
            <select v-model="SelSize" @change="SelPageSize">
                <option value="2">2条/页</option>
                <option value="3">3条/页</option>
                <option value="4">4条/页</option>
                <option value="5">5条/页</option>
            </select>
            <input type="text" v-model="NewIndex" style="width: 30px;" >
            <input type="button" value="GO" @click="TakeInfo">
        </span>
    
    </div>
    </template>
    
    <script setup lang="ts">
    import axios from 'axios';
    import {onMounted,ref} from 'vue';
    import { useRouter } from 'vue-router';
    
    const router=useRouter();
    
    //创建响应式数据
    const info=ref([{
        I_Id:0,
        I_Name:"",
        I_Budget:0,
        I_Receive:0,
        I_Residue:0,
        I_Number:0,
    }])
    
    //创建响应式数据(用于查询)
    const Whereinfo=ref({
        Iname:"",
        MinIbudget:"",
        MaxIbudget:"",
    })
    
    //创建响应式数据(用于保存分页信息)
    const PageInfo=ref({
        Pindex:1,       //当前页码
        Psize:2,        //每页显示几条
        totalCount:0,   //总记录数
        pageCount:0     //总页数
    })
    
    //文本框输入跳转页码
    const NewIndex=ref('')
    
    //创建响应式数据(用于下拉框改变也容量)
    const SelSize=ref(2)
    
    //创建生命周期函数钩
    onMounted(()=>{
        loadShow()
    })
    
    //加载数据方法
    const loadShow=()=>{
        axios.get("https://localhost:44321/api/Invest/ShowAllInvest",
            {
                params:{
                    Iname:Whereinfo.value.Iname,
                    MinIbudget:Whereinfo.value.MinIbudget,
                    MaxIbudget:Whereinfo.value.MaxIbudget,
                    PageIndex:PageInfo.value.Pindex,
                    PageSize:PageInfo.value.Psize
                }
            }
        )
        .then(res=>{
            info.value=res.data.list
    
            //依次将数据总数 总页数进行赋值
            PageInfo.value.totalCount=res.data.totalCount
            PageInfo.value.pageCount=res.data.PageCount
        })
        .catch(error=>{
            console.log(error);
        })
    }
    
    //完成分页功能
    const PageLoadInfo=(chonse:string)=>{
        switch(chonse)
        {
            case 'F':
                //点击首页当前页码为1
                PageInfo.value.Pindex=1;
            break;
            case 'E':
                //点击尾页当前页码需和总页数相等
                PageInfo.value.Pindex=PageInfo.value.pageCount;
            break;
            case 'U':
                //点击上一页 当前页索引页需减一
                if(PageInfo.value.Pindex>1)
                {
                    PageInfo.value.Pindex--;
                }
                else{
                    alert('当前已经是第一页');
                    return;
                }
            break;
            case 'N':
                if(PageInfo.value.Pindex<PageInfo.value.pageCount)
                {
                    //点击下一页 当前页索引需加一
                    PageInfo.value.Pindex+=1;
                }
                else
                {
                    alert('当前已经是最后一页');
                    return;
                }
            break;
        }
        loadShow();
    }
    
    //下拉框改变页容量
    const SelPageSize=()=>{
        PageInfo.value.Psize=SelSize.value;
        PageInfo.value.Pindex=1;
        loadShow();
    }
    
    //跳转到指定页码
    const TakeInfo=()=>{
        //1.接受用户在文本框输入的数据
        const Nindex=NewIndex.value;
    
        //判断要跳转的页码不能为空
        if(Nindex=="")
        {
            alert('跳转的页码不能为空');
            return;
        }
    
        //判断输入的页码必须为数字
        if(isNaN(Number(Nindex)))
        {
            alert('输入的页码必须为数字');
            NewIndex.value="";
            return;
        }
    
        //判断输入的页码不能小于1
        if(Number(Nindex)<1)
        {
            alert('输入的页码不能小于1');
            NewIndex.value="";
            return;
        }
    
        //判断输入的页码不能大于总页数
        if(Number(Nindex)>PageInfo.value.pageCount)
        {
            alert('输入的页码不能大于总页数');
            NewIndex.value="";
            return;
        }
        PageInfo.value.Pindex=Number(Nindex)
        loadShow();
    }
    
</script>